<template>
    <el-aside
            width="initial"
    >
        <el-button @click="ChangeCollapse(isCollapse)" style="width:65px;">
            {{buttonName}}
        </el-button>
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @open="Open" @close="Close" :collapse="isCollapse">
            <el-submenu v-for="(item,index) in menuData" :key="index" :index="index+''" :title="item.title">
                <span slot="title">{{item.title}}</span>
                <template slot="title" v-if="item.icon!=''">
                    <i :class="item.icon"></i>
                </template>
                <el-menu-item v-for="(item1,index1) in item.items" :key="index+'-'+index1" :index="index+'-'+index1" v-if="item1.tabName!=''" @click="addTab(item1.tabName,item1.title,item1.url,index+'-'+index1)">{{item1.title}}</el-menu-item>
                <el-menu-item v-for="(item1,index1) in item.items" :key="index+'-'+index1" :index="index+'-'+index1" v-if="item1.tabName==''&&item1.items.length==0">{{item1.title}}</el-menu-item>
                <el-submenu v-for="(item1,index1) in item.items" :key="index+'-'+index1" :index="index+'-'+index1" v-if="item1.items.length>0" :title="item1.title">
                    <span slot="title">{{item1.title}}</span>
                    <el-menu-item v-for="(item2,index2) in item1.items" :key="index+'-'+index1+'-'+index2"  :index="index+'-'+index1+'-'+index2" v-if="item2.tabName!=''" @click="addTab(item2.tabName,item2.title,item2.url,index+'-'+index1+'-'+index2)">{{item2.title}}</el-menu-item>
                    <el-menu-item v-for="(item2,index2) in item1.items" :key="index+'-'+index1+'-'+index2" :index="index+'-'+index1+'-'+index2" v-if="item2.tabName==''&&item2.items.length==0">{{item2.title}}</el-menu-item>
                    <el-submenu v-for="(item2,index2) in item1.items" :key="index+'-'+index1+'-'+index2" :index="index+'-'+index1+'-'+index2" v-if="item2.items.length>0" :title="item2.title">
                        <span slot="title">{{item2.title}}</span>
                        <el-menu-item v-for="(item3,index3) in item2.items" :key="index+'-'+index1+'-'+index2+'-'+index3"  :index="index+'-'+index1+'-'+index2+'-'+index3" v-if="item3.tabName!=''" @click="addTab(item3.tabName,item3.title,item3.url,index+'-'+index1+'-'+index2+'-'+index3)">{{item2.title}}</el-menu-item>
                        <el-menu-item v-for="(item3,index3) in item2.items" :key="index+'-'+index1+'-'+index2+'-'+index3" :index="index+'-'+index1+'-'+index2+'-'+index3" v-if="item3.tabName==''&&item3.items.length==0">{{item3.title}}</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-submenu>
        </el-menu>
    </el-aside>
</template>
<script>
    module.exports = {
        data: function () {
            return{
                API:APIBase+"/Manage/",
                APIList:APIBase+"/Manage/",
                isCollapse: true,
                buttonName:"展开",
                menuData:[],
                activeMenu:''
            }
        },
        mounted:function(){
            this.getMenu();
        },
        watch:{
            "$route":function(){

            },
        },
        methods:{
            Open:function(key, keyPath) {
                console.log(key, keyPath);
            },
            Close:function(key, keyPath) {
                console.log(key, keyPath);
            },
            ChangeCollapse:function(isCollapse){
                this.isCollapse=!isCollapse;
                if(isCollapse){
                    this.buttonName="收起";
                }else{
                    this.buttonName="展开";
                }
            },
            addTab:function (tabName,targetName,url,MenuIndex) {
                let arr=[tabName,targetName,url,MenuIndex];
                this.$emit('add-tab-event',arr);
            },
            getMenu:function () {
                let _this=this;
                axios.get('menuData/menuData.json').then(function (response) {
                    _this.menuData=response.data;
                    console.log(_this.menuData);
                }).catch(function (error) {
                    _this.$message.error('读取本地菜单失败');
                    console.error(error);
                })
            },
            changeMenu:function (activeMenu) {
                this.activeMenu=activeMenu;
            }
        }
    }
</script>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>